{extend name='public/base' /}

{block name="content"}
<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章ID/标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="so" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">文章标签</label>
                <div class="layui-input-inline">
                    <select name="classId">
                        <option value="">请选择标签</option>
                        <option value="0">美食</option>
                        <option value="1">新闻</option>
                        <option value="2">八卦</option>
                        <option value="3">体育</option>
                        <option value="4">音乐</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="layui-card-body">
        <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
    </div>
</div>

<form id="form" class="layui-form" style="display: none" lay-filter="form">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章分类</label>
                <div class="layui-input-inline">
                    <select name="classId">
                        <option value="">请选择分类</option>
                        <option value="0">美食</option>
                        <option value="1">新闻</option>
                        <option value="2">八卦</option>
                        <option value="3">体育</option>
                        <option value="4">音乐</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    <input type="number" name="age" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">选择视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadFile">选择文件</button>
                    <button type="button" class="layui-btn" id="startUpload">开始上传</button>
                    <input type="file" style="display: none" id="file">
                    <div class="loading" style="margin-top: 10px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="true"
                             lay-filter="uploadProgress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="path" value="">
            </div>
        </div>
    </div>
</form>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>

<script type="text/html" id="table-content-list">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script type="text/html" id="buttonTpl">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs">待审核</button>
    {{#  } elseif (d.status == 1) { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">已通过</button>
    {{# } elseif (d.status == 2){ }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">已拒绝</button>
    {{# } else{ }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未知状态</button>
    {{#  } }}
</script>

<script type="text/html" id="imgTpl">
    <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.img }}>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['table', 'element'], function () {
        let $ = layui.$,
            table = layui.table,
            form = layui.form,
            // upload = layui.upload,
            element = layui.element,
            TableData = table.render({
                elem: '#LAY-app-content-list'
                , toolbar: '#toolbarDemo'
                , page: true
                , method: 'post'
                , limit: 15
                , limits: [15, 50, 200, 600, 1000, 1800, 3000]
                , url: '/manage/projects/video/getList' //数据接口
                , title: '用户数据表'
                , cols: [
                    [ //表头
                        {field: 'id', type: 'checkbox', align: 'center'}
                        , {field: 'id', title: 'ID', align: 'center'}
                        , {field: 'title', title: '标题', align: 'center'}
                        , {field: 'img', title: '封面', align: 'center', toolbar: '#imgTpl'}
                        , {field: 'username', title: '用户名', align: 'center'}
                        , {field: 'status', title: '状态', align: 'center', toolbar: '#buttonTpl'}
                        , {field: 'describe', title: '描述', align: 'center'}
                        , {field: 'views', title: '浏览量', align: 'center'}
                        , {field: 'createTime', title: '创建时间', align: 'center'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            })

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            let field = data.field;
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field
            });
        });

        var active = {
            batchdel: function () {
                var checkStatus = table.checkStatus('LAY-app-content-list')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }

                layer.confirm('确定删除吗？', function (index) {

                    //执行 Ajax 后重载
                    /*
                    admin.req({
                      url: 'xxx'
                      //,……
                    });
                    */
                    table.reload('LAY-app-content-list');
                    layer.msg('已删除');
                });
            },
        };

        // upload.render({
        //     elem: '#test5',
        //     url: '/manage/upload/video', //此处配置你自己的上传接口即可
        //     exts: 'mp4|mkv|FLV|rmvb|jpg',
        //     // accept: 'video', //视频
        //     done: function (res) {
        //         layer.msg('上传成功');
        //         console.log(res)
        //     }
        // });
        let bytesPerPiece = 1024 * 1024 * 4, // 每个文件切片大小定为4MB
            uploadStatus = true,
            totalPieces;
        //绑定上传
        $('#uploadFile').on('click', function () {
            $('#file').click();
        })
        //监听
        $("#file").change(function () {
            let val = $('#file')[0]['files'][0]['name'],
                html = '文件名：' + val;
            $('#uploadFile').html(html);
            $('#uploadFile').css('background-color', '#c2c2c2');
        })

        //发送请求
        $('#startUpload').on('click', function () {
            let blob = $('#file')[0]['files'][0],
                start = 0,
                end,
                index = 0,
                filesize = blob.size,
                filename = blob.name,
                date = new Date(),
                time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();


            //计算文件切片总数
            totalPieces = Math.ceil(filesize / bytesPerPiece);
            while (start < filesize) {
                end = start + bytesPerPiece;
                if (end > filesize) {
                    end = filesize;
                }
                let chunk = blob.slice(start, end), //切割文件
                    sliceIndex = blob.name + index,
                    formData = new FormData();
                formData.append("file", chunk, filename);
                formData.append("number", index);
                formData.append("total", totalPieces);
                formData.append("time", time);
                $.ajax({
                    url: '/manage/upload/video',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done(function (res) {
                    if (res.code === 0) {
                        console.log(res);
                        let proportion = Math.ceil((start / filesize * 10000) / 100);
                        element.progress('uploadProgress', proportion + '%');       // 进度条
                        if (res.data.path) {
                            $('#path').val(res.data.path);
                        }
                    } else {
                        uploadStatus = false;
                    }
                }).fail(function (res) {
                });
                start = end;
                index++;
            }
            if (!uploadStatus) {
                alert('上传失败');
            }
        })

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            let type = $(this).data('type');
            switch (type) {
                case 'add':
                    layer.open({
                        type: 1
                        , title: '添加文章'
                        , content: $('#form')
                        , area: ['550px', '550px']
                        , btn: ['确定', '取消']
                        , btn1: function (index, layero) {

                        }
                    });
                    break;
            }
        });

    });
</script>
{/block}